<script lang='ts' setup>
import { Card } from '@/components/ui/card';
import bigEssayCard from '@/assets/image/bigEssayCard.jpg';
import { rankApi } from '~/utils/api/rank-api';
import { type Article, articleApi } from '~/utils/api/article-api';

// -------- 获取实时排行榜 --------
const result = await rankApi.getRealTimeRankingServer();

// -------- 获取文章详情 --------
const article = ref<Article>();
if (result.data.value) {
	const { data } = await articleApi.getArticleServer(result.data.value.data[0].article_id);
	article.value = data.value?.data;
}
</script>

<template>
	<Card class="h-[200px] md:h-[300px] lg:h-[380px] w-full rounded-2xl overflow-hidden shadow">
		<NuxtLink :to="`/article/${article?.article_id}`">
			<div class="h-full relative">
				<img
					:src="bigEssayCard"
					alt=""
					class="absolute h-full w-full object-cover"
				>
				<div class="absolute bottom-0 left-0 p-6 text-white w-full">
					<div class="text-2xl font-bold text-shadow w-full">
						{{ article?.article_title }}
					</div>
					<div class="text-base font-normal text-shadow w-full line-clamp-2">
						{{ article?.article_description }}
					</div>
				</div>
			</div>
		</NuxtLink>
	</Card>
</template>

<style lang="postcss" scoped>
.text-shadow {
  text-shadow: 0 4px 10px #000000;
}
</style>
